<template>
  <div class="app-container">
    <!--搜索栏-->
    <div class="filter-container">
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-edit" size="mini" @click="handleAdd">新增</el-button>
    </div>
    <!--表格框-->
    <el-table
      v-loading="table.loading"
      :data="table.data"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
      style="width: 100%;margin-top: 20px"
      row-key="menuId"
      border
      default-expand-all
    >
      <el-table-column prop="menuName" label="菜单名称" width="180" />
      <el-table-column prop="url" label="访问路径" min-width="180" />
      <el-table-column prop="status" label="状态" />
      <el-table-column label="操作" align="center" width="230" fixed="right">
        <template slot-scope="{row}">
          <el-button type="text" @click="handleUpdate(row)">编辑</el-button>
          <el-button type="text" @click="del(row.menuId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--表单-->
    <el-dialog v-el-drag-dialog v-loading="dialog.loading" :title="dialog.title[dialog.status]" :visible.sync="dialog.visible" width="460px" :close-on-click-modal="false" >
      <el-form :ref="dialog.formRef" :rules="dialog.rules" :model="model" label-position="right" label-width="80px" style="width: 400px;">
        <el-form-item label="父级菜单" prop="parentId">
          <SelectTree v-model="model.parentId" :tree-props="dialog.treeList.parentMenu.treeProps" :tree-data="treeData" :accordion="dialog.treeList.parentMenu.accordion" style="width: 320px;" @getValue="getValue($event)" />
          <!--          <el-form-item label="活动区域">-->
          <!--            <el-select v-model="form.region" placeholder="请选择活动区域">-->
          <!--              <el-option label="区域一" value="shanghai"></el-option>-->
          <!--              <el-option label="区域二" value="beijing"></el-option>-->
          <!--            </el-select>-->
          <!--          </el-form-item>-->
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="model.menuName" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="访问地址" prop="url">
          <el-input v-model="model.url" placeholder="请输入访问地址" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.visible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialog.status==='add'?addData():updateData()">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { find, list, create, update, del } from '@/api/menu'
import SelectTree from '../../../components/ElTreeSelect'
import waves from '../../../directive/waves'
import elDragDialog from '../../../directive/el-drag-dialog'
export default {
  name: 'Menu',
  components: {
    SelectTree
  },
  directives: { waves, elDragDialog },
  data() {
    return {
      // 初始化表单数据
      initModel: {
        menuId: undefined,
        parentId: '',
        menuName: '',
        url: ''
      },
      // 表单数据
      model: {},
      table: {
        loading: true,
        queryList: {

        },
        data: []
      },
      dialog: {
        loading: false,
        formRef: 'formRef',
        visible: false,
        status: '',
        title: {
          add: '新增',
          edit: '编辑'
        },
        rules: {
          menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }]
        },
        list: {
          parentMenu: [{ menuName: 'a', value: 'aid' }, { label: 'b', value: 'bid' }]
        },
        treeList: {
          parentMenu: {
            accordion: true,
            treeProps: {
              id: 'menuId',
              label: 'menuName',
              children: 'children'
              // disabled:true
            },
            data: []
          }
        }

      }
      // 表格数据
      // ,tableData: [
      //   {
      //     menuId: 1,
      //     menuName: '2016-05-02',
      //     url: '王小虎1',
      //     status: '上海市普陀区金沙江路 1518 弄'
      //   }, {
      //     menuId: 2,
      //     menuName: '2016-05-04',
      //     url: '王小虎2',
      //     status: '上海市普陀区金沙江路 1517 弄'
      //   }, {
      //     menuId: 3,
      //     menuName: '2016-05-01',
      //     url: '王小虎3',
      //     status: '上海市普陀区金沙江路 1519 弄',
      //     hasChildren: false,
      //     children: [{
      //       menuId: 31,
      //       menuName: '2016-05-01',
      //       url: '王小虎31',
      //       status: '上海市普陀区金沙江路 1519 弄'
      //     }, {
      //       menuId: 32,
      //       menuName: '2016-05-01',
      //       url: '王小虎32',
      //       status: '上海市普陀区金沙江路 1519 弄x'
      //     }]
      //   }, {
      //     menuId: 4,
      //     menuName: '2016-05-03',
      //     url: '王小虎4',
      //     status: '上海市普陀区金沙江路 1516 弄'
      //   }
      // ],
      // treeList: [
      //   { id: 1, parentId: 0, name: '一级菜单A', rank: 1 },
      //   { id: 2, parentId: 0, name: '一级菜单B', rank: 1 },
      //   { id: 3, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 4, parentId: 1, name: '二级菜单A-A', rank: 2 },
      //   { id: 5, parentId: 1, name: '二级菜单A-B', rank: 2 },
      //   { id: 6, parentId: 2, name: '二级菜单B-A', rank: 2 },
      //   { id: 7, parentId: 4, name: '三级菜单A-A-A', rank: 3 },
      //   { id: 8, parentId: 7, name: '四级菜单A-A-A-A', rank: 4 },
      //   { id: 9, parentId: 8, name: '五级菜单A-A-A-A-A', rank: 5 },
      //   { id: 10, parentId: 9, name: '六级菜单A-A-A-A-A-A', rank: 6 },
      //   { id: 11, parentId: 10, name: '七级菜单A-A-A-A-A-A-A', rank: 7 },
      //   { id: 12, parentId: 11, name: '八级菜单A-A-A-A-A-A-A-A', rank: 8 },
      //   { id: 13, parentId: 12, name: '九级菜单A-A-A-A-A-A-A-A-A', rank: 9 },
      //   { id: 14, parentId: 13, name: '十级菜单A-A-A-A-A-A-A-A-A-A', rank: 10 },
      //   { id: 15, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 16, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 17, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 18, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 19, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 20, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 21, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 22, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 23, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 24, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 25, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 26, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 27, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 28, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 29, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 30, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 31, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 32, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 33, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 34, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 35, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 36, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 37, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 38, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 39, parentId: 0, name: '一级菜单C', rank: 1 },
      //   { id: 40, parentId: 0, name: '一级菜单end', rank: 1 }
      // ]
    }
  },
  computed: {
    treeData() {
      const buildTree = this.buildTree(this.dialog.treeList.parentMenu.data)
      // console.log('194', buildTree)
      return buildTree
    }
  },
  beforeCreate() { },
  created() {
    this.find()
  },
  beforeMount() { },
  mounted() {},
  beforeUpdate() {
    // console.log('113' + 'beforeUpdate')
  },
  updated() {
    // console.log('116' + 'updated')
  },
  beforeDestroy() { },
  destroyed() {},
  methods: {
    // HEINFO: 2020/7/22 11:30 构建树形
    buildTree(data) {
      const cloneData = JSON.parse(JSON.stringify(data))
      return cloneData.filter(father => {
        const childArr = cloneData.filter(child => father.menuId === child.parentId)
        childArr.length > 0 ? father.children = childArr : ''
        return father.parentId === ''
      })
    },
    // getValue(value) {
    //   console.log(value)
    //   this.model.parentId = value
    // },
    // HEINFO: 2020/7/21 22:10 查询
    find() {
      this.table.loading = true
      find(this.table.queryList).then((res) => {
        const buildTree = this.buildTree(res.data)
        this.table.data = buildTree
      }).then(() => {
        setTimeout(() => {
          this.table.loading = false
        }, 200)
      })
    },
    // HEINFO: 2020/7/21 22:10 菜单下拉列表
    list() {
      return list().then((res) => {
        this.dialog.treeList.parentMenu.data = res.data
      })
    },
    // HEINFO: 2020/7/21 22:10 新增
    handleAdd() {
      this.list()
      // 浅拷贝
      // this.model = Object.assign({}, this.initModel)
      // 深拷贝
      this.model = JSON.parse(JSON.stringify(this.initModel))
      this.dialog.status = 'add'
      this.dialog.visible = true
      this.$nextTick(() => {
        // HEINFO: 2020/7/21 17:41 updated 之后执行
        // console.log('127' + '')
        this.$refs[this.dialog.formRef].clearValidate()
      })
    },
    addData() {
      console.log('107', this.model)
      this.$refs[this.dialog.formRef].validate((valid) => {
        // console.log('134', valid)
        if (valid) {
          this.dialog.loading = true
          create(this.model).then((res) => {
            this.dialog.loading = false
            this.dialog.visible = false
            this.$notify({
              title: '提示',
              message: '新增成功',
              type: 'success',
              duration: 2000
            })
          }).then(() => {
            this.find()
          })
        }
      })
    },
    // HEINFO: 2020/7/21 22:10 编辑
    handleUpdate(row) {
      this.list().then(() => {
        this.model = JSON.parse(JSON.stringify(row))
        this.dialog.status = 'edit'
        this.dialog.visible = true
        this.$nextTick(() => {
          this.$refs[this.dialog.formRef].clearValidate()
        })
      })
    },
    updateData() {
      // console.log('110' + 'updateData')
      this.$refs[this.dialog.formRef].validate((valid) => {
        if (valid) {
          this.dialog.loading = true
          const tempData = Object.assign({}, this.model)
          update(tempData).then(() => {
            this.dialog.loading = false
            this.dialog.visible = false
            this.$notify({
              title: '提示',
              message: '更新成功',
              type: 'success',
              duration: 2000
            })
          }).then(() => {
            this.find()
          })
        }
      })
    },
    // HEINFO: 2020/7/21 22:10 删除
    del(menuId) {
      del({ menuId }).then(() => {
        this.$notify({
          title: '提示',
          message: '删除成功',
          type: 'success',
          duration: 2000
        })
      }).then(() => {
        this.find()
      })
    }
  }
}
</script>
